﻿@model Tuple<User,List<Menu>>;
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>@ViewData["title"]</title>
    <link rel="shortcut icon" href="~/images/logo.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/lib/layui/css/layui.css">
    <link rel="stylesheet" href="/css/admin.css">
    <style>
        .layui-side-scroll .layui-nav-item a cite {
            padding-left: 10px;
            display: inline-block;
        }

        .layui-side-scroll .layui-nav-item .layui-nav-child dd {
            padding-left: 25px;
        }

        #leftMask {
            opacity: 0.3;
            background-color: #000;
            width: 200px;
            left: 0;
            top: 60px;
            height: 100%;
            position: fixed;
            z-index: 10002;
            display: none;
        }

        #topMask {
            display: none;
            opacity: 0.3;
            background-color: #000;
            width: 100%;
            left: 0;
            top: 0;
            height: 60px;
            position: fixed;
            z-index: 10002;
        }
        #username:hover, #messageItem :hover, #messageItem, #username {
            color: #fff !important;
        }
        .topMenu  .menuText {
            display: block;
            height: 20px;
            line-height: 20px;
            padding-top: 12px;
            text-align: center;
            font-size: 12px;
        }

        .topMenu a{
            text-align:center;
        }
        .topMenu .layui-nav-item {
            width: 80px;
            height: 60px !important;
        }

        .topMenu .layui-nav-item.this {                
            background-color: #03887b;                
        }

        .layui-layout-admin .layui-logo {
            width: 310px;
            display: flex;
            align-items: center;
            height: 60px;
        }
        .layui-breadcrumb {
            margin-left: 221px;
            display:none;
        }
        .layui-layout-admin .layui-header{
            height:60px;
        }
       .layui-layout-admin .layui-header .layui-nav .layui-nav-item, .layui-layout-admin .layui-logo{
           line-height:60px;
       }
        .layui-header .layui-nav-item .layui-icon {
            position: relative;
            top: 12px;
            font-size: 20px;
        }

        .layui-layout-admin .layui-side {
            top: 60px;
            background-color: rgb(69,70,74);
        }
        .topMenu.layui-nav .layui-nav-item a{
            padding:0;
            line-height:20px;
        }
        .topMenu.layui-nav .layui-nav-item a .text{
            margin-top: 10px;
        }
            
        .layui-layout-admin .layui-header .layui-nav .layui-this:after, .layui-layout-admin .layui-header .layui-nav-bar {
           display: none;
        }
        .layui-layout-admin .layui-header .layui-nav-child{
            top:60px;
        }

        .layui-nav-tree .layui-nav-item{
            display:none;
        }


       .layui-nav-tree .layui-nav-item.layui-show {
            display: block;
       }

        .layui-nav.topMenu .layui-nav-item a:hover, .layui-nav.topMenu .layui-this a{
            color:#fff;
        }
        .layui-layout-admin .layui-header {
            border-bottom: 1px solid #f6f6f6;
            box-sizing: border-box;
            background-color: rgb(3,117,187);
            color: white;
        }

        .topMenu .layui-nav-item.this {
            background-color: rgb(10,138,211);
        }

        .layui-nav.layui-nav-tree {
            background-color: rgb(69,70,74);
        }
        .layui-nav-itemed > .layui-nav-child {
            display: block;
            padding: 0;
            background-color: rgba(51,52,54,1) !important;
        }
        .layui-side .layui-nav-tree .layui-nav-child dd.layui-this {
            background: rgb(53,98,157);
            color: #fff;
        }
       .layui-side .layui-nav-tree .layui-nav-child dd.layui-this a {
           background: rgb(53,98,157);
          color: #fff !important;
       }
        .layui-side .layui-nav .layui-nav-item a {
            color:#aeafb1;
        }
        .layui-side .layui-nav-tree .layui-nav-item a:hover {
            background-color: rgba(51,52,54,1);
        }

        .layui-side .layui-nav-tree .layui-nav-item.selected a:hover {
            background-color: rgba(53,98,157,1);
        }

        .layui-nav-bar{
            display:none;
        }
        .layui-side .layui-nav-item {
            background-color: #45464a;
        }
        .layui-nav-item.selected,
        .layui-nav-item.selected a{
            background: rgb(53,98,157);
            color: #fff !important;
        }

        .userProfile {
            margin-top: 0;
            text-align: center;
            width: 190px;
            padding-top: 20px;
            background-color: #45464a;
            padding-bottom: 20px;
        }
        .userProfile .photo {
          width: 55px;
          height:55px;
          border: 2px solid #fff;
          border-radius: 60px;
        }
            .userProfile .userInfo {
                color: #f4f5f9;
                padding-top: 10px;
            }

                .userProfile .userInfo a {
                    color: #f4f5f9;
                }
        .userProfile .userInfo .username {
            font-size: 16px;
        }
        .userOptBtns a{
            cursor:pointer;
        }
        .userOptBtns{
            padding-top:8px;
            font-size:12px;
        }
        .layui-nav-more{
            display:none;
        }
    </style>
</head>
<body class="layui-layout-body">
    <div class="layadmin-tabspage-none">
        <div class="layui-layout layui-layout-admin">
            <div class="layui-header">
                <div class="layui-logo">
                    <img src="/images/logo.png" style="width:40px;" />
                    <div style="padding-left:10px;font-size:20px;">IT项目管理系统</div>
                </div>

                <ul class="layui-nav   topMenu" style="padding-right: 20px;margin-left:277px;">

                    <li class="layui-nav-item this" onclick="showMenu('m_home',this)">
                        <a>
                            <i class="layui-icon layui-icon-home"></i>
                            <div class="text">首页</div>
                        </a>
                    </li>

                    @foreach (var m in Model.Item2)
                    {                        
                        <li class="layui-nav-item  " onclick="showMenu('m_@m.Id',this)">
                            <a>
                                <i class="layui-icon @m.Icon"></i>
                                <div class="text">@m.Name</div>
                            </a>
                        </li>
                    }



                    <li class="layui-nav-item" onclick="showHelp()">
                        <a>
                            <i class="layui-icon layui-icon-help"></i>
                            <div class="text">帮助文档</div>
                        </a>
                    </li>
                </ul>
                
            </div>
            <div class="layui-side">
                <div class="layui-side-scroll">

                    <div class="userProfile">
                        <img class="photo" src="~/images/admin_icon.png"/>
                        <div class="userInfo">
                            <div class="username">
                                @if (Model != null)
                                {
                                    @Model.Item1.Name
                                }
                            </div>
                            <div class="userOptBtns">
                                <a onclick="modifyPass()" style="margin-right: 10px;">修改密码</a>
                                <a onclick="logout()">退出</a>
                            </div>
                        </div>
                    </div>

                    <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                    <ul class="layui-nav layui-nav-tree">
                        <li class="layui-nav-item layui-show selected" id="m_home">
                            <a class="menuItem" data-nav1="首页" href="/home/dashboard" target="mainFrame">
                                <i class="layui-icon layui-icon-home"></i><cite>首页</cite>
                            </a>
                        </li>

                        @foreach (var m in Model.Item2)
                        {
                            <li class="layui-nav-item layui-nav-itemed" id="m_@m.Id">
                                <a><i class="layui-icon @m.Icon"></i><cite>@m.Name</cite></a>
                                <dl class="layui-nav-child">
                                    @foreach (var sub in m.subMenus)
                                    {
                                        <dd ><a class="menuItem" href="@sub.Url" target="mainFrame">@sub.Name</a></dd>
                                    }
                                </dl>
                            </li>

                        }
                    </ul>
                </div>
            </div>
            <script src="~/js/public.js"></script>
            <script src="/lib/layui/layui.all.js"></script>
            <script>
                function logout() {
                    layer.confirm("确定要退出吗？", function (index) {
                        layer.close(index);
                        window.location.href = "/login/logout";
                    });
                }

                function modifyPass() {
                    layer.open({
                        type: 2,
                        title:'修改密码',
                        content: '/modifyPassword',
                        area:["500px","265px"]
                    });
                }

                function unfinish() {
                    layer.alert("功能正在开发中...");
                }
                var $ = layui.$;
                 
                function showMenu(id,obj) {                    
                    $('.topMenu .layui-nav-item.this').removeClass("this");
                    $(obj).addClass("this");

                    
                    $('.layui-nav-tree .layui-show').removeClass("layui-show");
                    $('#' + id).addClass("layui-show");

                    var childMenu = $('#' + id).find('.layui-nav-child a');
                    if (childMenu.length > 0) {                        
                        childMenu[0].click();
                    } else {
                        $('#' + id).find('a')[0].click();
                    }                    
                }

                function showHelp() {
                    window.open("/manual/index.html");
                }

            </script>
            <div class="layui-body" id="LAY_app_body">
                <div class="layadmin-tabsbody-item layui-show">
                    <iframe name="mainFrame" src="/Home/Dashboard" id="mainFrame" frameborder="0" class="layadmin-iframe"></iframe>
                </div>
            </div>


             

            <div id="leftMask"></div>
            <div id="topMask"></div>

            </div>
        </div>    
</body>
</html>